import React, { Component } from 'react'
import { Input } from 'antd'
import CountUp from 'react-countup'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
import { CSSTransition } from 'react-transition-group'

import XHeader from '../../components/header'
import XFooter from '../../components/footer'

import './index.scss';

import Icon_1 from '../../images/home/icon_1.png'
import Icon_2 from '../../images/home/icon_2.png'
import Icon_3 from '../../images/home/icon_3.png'
import Icon_4 from '../../images/home/icon_4.png'
import Icon_5 from '../../images/home/icon_5.png'
import Icon_6 from '../../images/home/icon_6.png'
import Icon_7 from '../../images/home/icon_7.png'
import Icon_8 from '../../images/home/icon_8.png'
import Pic_1 from '../../images/home/pic_1.png'
import Pic_2 from '../../images/home/pic_2.png'
import jianTou from '../../images/home/jiantou.png'

import Swiper_1 from '../../images/home/swiper_1.png'
import Swiper_2 from '../../images/home/swiper_2.png'
import Swiper_3 from '../../images/home/swiper_3.png'
import Swiper_4 from '../../images/home/swiper_4.png'
import Swiper_5 from '../../images/home/swiper_5.png'
import Swiper_6 from '../../images/home/swiper_6.png'

import Swiper_Icon_1 from '../../images/home/swiper_icon_1.png'
import Swiper_Icon_2 from '../../images/home/swiper_icon_2.png'
import Swiper_Icon_3 from '../../images/home/swiper_icon_3.png'
import Swiper_Icon_4 from '../../images/home/swiper_icon_4.png'
import Swiper_Icon_5 from '../../images/home/swiper_icon_5.png'
import Swiper_Icon_6 from '../../images/home/swiper_icon_6.png'

import Test from '../../images/home/bg.mp4'

const Search = Input.Search

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: '',
      height: '',
      searchType: '企业'
    }
  }
  componentDidMount() {
    this.setState({
      height: window.innerHeight
    })

    new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 0,
      slidesPerGroup: 4,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
  handleSearchType(type) {
    this.setState({
      searchType: type
    })
  }
  render() {
    const { height, searchType } = this.state
    return (
      <section className='page page-home'>
        <video className="video" loop="loop" autoPlay={true}>
          <source src={Test} type="video/mp4" />
        </video>
        <div className='banner' style={{ height: height+'px' }}>
          <div className='inner'>
            <h2>
              上海文化企业大数据平台
              <CSSTransition
                in
                timeout={500}
                classNames='home-title-tag'
                appear
              >
                <i></i>
              </CSSTransition>
            </h2>
            <div className='nav'>
              <a href="javascript:;" className={searchType === '企业' ? 'active' : null} onClick={this.handleSearchType.bind(this, '企业')}>搜企业</a>
              <a href="javascript:;" className={searchType === '园区' ? 'active' : null} onClick={this.handleSearchType.bind(this, '园区')}>搜园区</a>
              <a href="javascript:;" className={searchType === '协(商)会' ? 'active' : null} onClick={this.handleSearchType.bind(this, '协(商)会')}>搜协(商)会</a>
              <a href="javascript:;" className={searchType === '投资机构' ? 'active' : null} onClick={this.handleSearchType.bind(this, '投资机构')}>搜投资机构</a>
              <a href="javascript:;" className={searchType === '投融资事件' ? 'active' : null} onClick={this.handleSearchType.bind(this, '投融资事件')}>搜投融资事件</a>
            </div>
            <div className='search'>
              <Search
                className='search-input'
                placeholder={`请输入${searchType}名称`}
              />
            </div>
            <div className='company-all'>
              企业总数
              <CountUp
                start={0}
                end={751033}
                duration={3}
                separator=","
              >
              </CountUp>
              家
            </div>
            <div className='company-detail'>涵盖9个大类、43个中类、146个小类的所有文创企业</div>
          </div>
          <XHeader className='header'></XHeader>
        </div>
        <div className='section section1'>
          <div className='inner'>
            <h2>平台优势</h2>
            <div className='info-wrap'>
              <p className='info'>上海文化企业大数据平台系东方网旗下的互联网大数据征信品牌，致力于上游数据整合和下游应用产品开发，</p>
              <p className='info'>提供高质量的有价值数据和基于数据驱动的应用及解决方案，为上海市文化产业主管部门、产业研究机构、文化智库、</p>
              <p className='info'>文化金融服务机构、文化产业园区、文化企业等提供基于云计算的文化企业大数据一站式服务。努力发展成为文化公共信用信息整</p>
              <p className='info'>合服务的引领者及信用领域综合 性专业服务机构，为客户提供有价值的决策参考。</p>
            </div>
            <ul className='list'>
              <li>
                <div className='img'><img src={Icon_1} /></div>
                <h3>查企业</h3>
                <p>大数据分析企业动态，全方位了解 企业情况，包括信用信息、融资信 息、经营信息等</p>
              </li>
              <li>
                <div className='img'><img src={Icon_2} /></div>
                <h3>找园区</h3>
                <p>覆盖全上海文创园区信息，帮忙园区企业招商，以及助力文创企业快捷入驻园区</p>
              </li>
              <li>
                <div className='img'><img src={Icon_3} /></div>
                <h3>搜协(商)会</h3>
                <p>优秀文创产业协会推荐，行业峰会 发布，汇聚志同道合者携手共进</p>
              </li>
              <li>
                <div className='img'><img src={Icon_4} /></div>
                <h3>寻投融资</h3>
                <p>甄选优秀投资机构，为投资方和融资企业牵线搭桥</p>
              </li>
              <li>
                <div className='img'><img src={Icon_5} /></div>
                <h3>发通知</h3>
                <p>为文创企业管理部门定制管理后台，向认领企业定向推送动态信息，确保信息高效、精准送达</p>
              </li>
              <li>
                <div className='img'><img src={Icon_6} /></div>
                <h3>专项资金申报</h3>
                <p>政府文创企业扶持资金申请入口， 解决企业资金困难问题</p>
              </li>
              <li>
                <div className='img'><img src={Icon_7} /></div>
                <h3>区域资本流动</h3>
                <p>通过动态监控上海市各区文创企业注册以及对外投资情况，统计对比分析各区企业资本流向、区域营商环境等</p>
              </li>
              <li>
                <div className='img'><img src={Icon_8} /></div>
                <h3>文创榜单</h3>
                <p>归集并展示上海市文创企业各种排 行榜单及获奖名单</p>
              </li>
            </ul>
          </div>
        </div>
        <div className='section section2'>
          <div className='inner'>
            <h2>主要应用</h2>
            <div className='info-wrap'>
              <p className='info'>通过大数据、AI、机器深度学习、数据可视化等最新互联网技术，建立文化行业专业化数据服务平台，实时覆盖上海全市文化企业</p>
              <p className='info'>的工商信息、法院判决信息、关联企 业信息、法律诉讼、失信信息、被执行人信息、知识产权信息、公司新闻、企业年报、对外</p>
              <p className='info'>投资、获奖信息、融资信息等互联网和政府公开数据。</p>
            </div>
            <div className='content'>
              <div className="swiper-container">
                <div className="swiper-wrapper">
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_1} alt=""/>
                      <h2>企业地图</h2>
                      <p>多维度数据分析，全面掌握企业状况</p>
                    </div>
                    <img src={Swiper_1} alt=""/>
                  </div>
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_2} alt=""/>
                      <h2>园区导航</h2>
                      <p>涵盖全市文创园区，协助企业顺利入驻</p>
                    </div>
                    <img src={Swiper_2} alt=""/>
                  </div>
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_3} alt=""/>
                      <h2>风险监控</h2>
                      <p>事前预防、实时跟踪、及时预警</p>
                    </div>
                    <img src={Swiper_3} alt=""/>
                  </div>
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_4} alt=""/>
                      <h2>数据可视化</h2>
                      <p>直观、全面、实时的企业信息</p>
                    </div>
                    <img src={Swiper_4} alt=""/>
                  </div>
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_5} alt=""/>
                      <h2>产业服务</h2>
                      <p>协(商)会对接、投资机构接洽</p>
                    </div>
                    <img src={Swiper_5} alt=""/>
                  </div>
                  <div className="swiper-slide">
                    <div className='mask'>
                      <img src={Swiper_Icon_6} alt=""/>
                      <h2>舆情分析</h2>
                      <p>多多维度，多层次分析企业风险及趋势</p>
                    </div>
                    <img src={Swiper_6} alt=""/>
                  </div>
                </div>
                <div className="swiper-button-next"></div>
                <div className="swiper-button-prev"></div>
              </div>
            </div>
          </div>
        </div>
        <div className='section section3'>
          <div className='inner'>
            <h2>信东方·大数据<div className='bg'></div></h2>
            <div className='info-wrap'>
              <p className='info'>信东方专注于上海文创企业大数据采集、清洗、加工及可视化展示，让文化产业主管部门、产业研究机构、文化智库、文化金融服</p>
              <p className='info'>务机构、文化产业园区、文化企业更专注于决策本身，从采集数据的繁琐工作中解放出来，降低工作量的同时提高决策的效率。</p>
            </div>
            <div className='content'>
              <img className="jiantou1" src={jianTou} alt=""/>
              <img className="jiantou2" src={jianTou} alt=""/>
              <img src={Pic_1} />
            </div>
          </div>
        </div>
        <div className='section section4'>
          <div className='inner'>
            <h2>关于我们</h2>
            <div className='content'>
              <div className='left'>
                <p>公司成立于2007年12月，是上海东方网股份有限公司、上海东方文信科技有限公司强强联手打造 的互联网大数据征信品牌，定位文化行业智能大数据服务公司。公司致力于上游数据整合和下游应 用产品开发，提供高质量的有价值数据和基于数据驱动的应用及解决方案，为上海市文化产业主管 部门、产业研究机构、文化智库、文化金融服务机构、文化产业园区、文化企业等提供基于云计算 的文化企业大数据一站式服务。努力发展成为文化公共信用信息整合服务的引领者及信用领域综合 性专业服务机构，为客户提供…</p>
                <a href="">查看更多 >></a>
              </div>
              <div className='right'>
                <img src={Pic_2} />
              </div>
            </div>
          </div>
        </div>
        <XFooter></XFooter>
      </section>
    )
  }
}